<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1301_验证Diffing算法</title>
</head>

<body>
  <div id="test"></div>
  <!-- react核心库 -->
  <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 
     */
    class Person extends React.Component {

      state = {
        persons: [
          {id: 1,name: '小张', age: 22},
          {id: 2,name: '小王', age: 32},
        ]
      }
      

      add = () => {
        const {persons} = this.state
        const p = {id: persons.length+1,name: '小丽', age: 25}
        this.setState({persons: [p, ...persons]})
      }

      /**
       * 初始化渲染，状态更新重新渲染
       */
      render() {
        return (
         <div>
          <h2>展示人员信息</h2>
          <button onClick={this.add}>添加新成员</button>
          <h3>使用index（索引）作为key</h3>
          <ul>
            {
              this.state.persons.map((p,index)=> {
                return <li key={index}>
                  {p.name}----{p.age}&nbsp;
                  <input type="text"/>
                </li>
              })
            }
          </ul>
          <hr/>
          <h3>使用id(数据唯一标识）作为key</h3>
          <ul>
            {
              this.state.persons.map((p)=> {
                return <li key={p.id}>
                  {p.name}----{p.age}&nbsp;
                  <input type="text"/>
                </li>
              })
            }
          </ul>
         </div>
        )
      }
    }

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<Person/>, document.getElementById('test'))

  </script>
</body>

</html>